<template>
    <div class="topic">
        <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            >

                <router-link v-for="item in list" :key="item.id" :to="`/topic/detail?id=${item.id}`" tag="li">
                    <img :src="item.scene_pic_url" alt="">
                    <p>{{ item.title }}</p>
                    <p>{{item.subtitle}}</p>
                    <p>{{item.price_info}}元起</p>
                </router-link>
        </van-list>
        
    </div>
</template>

<script>
import { listaction ,detailaction} from "@/api/topic"
export default {
    data() {
        return {
            list:[],
            loading: false,
            finished: false,
            page:1
        };
    },
    computed: {

    },
    created(){
        listaction({
            page: this.page
        })
        .then(res=>{
            console.log(res);
        })
    },
    methods: {
        onLoad(){
            listaction({
               page: this.page
            })
            .then(res =>{
                // console.log(res ,"topic获取得数据");
                this.list.push(...res.data);
                this.page+=1;
                this.loading = false;
                // 获取最后一页得数据得时候 禁止加载数据
                if(res.total == this.page-1){
                    this.finished = true;
                }
            })
        }
    },
};
</script>

<style scoped lang="scss">
.topic{
    background-color: #fff;
    padding-bottom: 50px;
    li{
        margin-bottom:10px ;
        padding-bottom: 10px;
        
        img{
            width: 100%;
            height: 210px;
        }
        
        p:nth-child(2){
            margin-top: 20px;
            font-size: 18px;
            font-weight: 700;
        }
        p:nth-child(4){
            color: #b4282d;
            font-size: 14px;
        }
    }
}
</style>
